<template>
    <div id="wrapper">

          <el-header class="header-title">欢迎光临element-ui食品管理系统</el-header>
            <el-container class="container">
              <el-aside width="200px" class="left-container">
                <leftNav></leftNav>
              </el-aside>
              <el-main class="right-container">
                <router-view></router-view>
              </el-main>

            </el-container>
      <el-footer height="40px" class='footer'>A vue project for ' vue + vue-router + element-ui + axios' 食品后台管理系统 by besideyou</el-footer>

    </div>
</template>

<script>
  import Vue from 'vue'
  import  leftNav from '@/components/leftNav'
  import {Container, Header, Aside, Main, Footer} from 'element-ui'
  Vue.use(Container, Header, Aside, Main, Footer)
    export default {
        name: "index",
        data() {
            return {}
        },
        components:{
            'leftNav':leftNav,
            'el-container':Container,
            'el-header':Header,
            'el-aside':Aside,
            'el-main':Main,
            'el-footer':Footer,
        }
    }
</script>

<style scoped lang="scss">
  #wrapper >>> .el-menu{
    border-right: none;
  }
#wrapper{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: #fff;
    .container{
      height: 100%;
      .left-container{
       // overflow: scroll;
      }
      .right-container{
        overflow: scroll;
      }
    }
    .header-title{
        font-size: 30px;
        font-weight: 700;
        text-shadow: 2px 2px 5px #ffd04b;
        color: #fff;
        letter-spacing: 6px;
        line-height: 60px;
        text-align: center;
        background: #333;
    }
    .footer{

        text-align:center;
        background: linear-gradient(left, #545c63, #b3c0d1);
        color: #eee;
        line-height: 40px;

    }
}
</style>
